<template>
  <div>
    <div class="container radiusBottom">
      <div class="images">
        <div class="img">
          <img :src="styleUrls[dataJson.type][dataJson.stylesType]" />
        </div>
        <div class="buttonSetStyle" @click="alertTag">修改样式</div>
      </div>
    </div>
    <div class="container">
      <div class="listHeads">
        <el-button @click="alertCoupon = true">
          选择优惠券
        </el-button>
        <span>上下拖拽可排序</span>
      </div>
      <ul>
        <li
          v-for="(item, index) in dataJson.coupon"
          :key="index"
          class="listItem"
          draggable="true"
          @dragstart.capture="dragstartListSort(index, $event)"
          @drop.stop="dropListSort(index, $event, 'coupon')"
          @dragover.prevent="dragoverListSort"
        >
          <span v-if="item.type === 1" class="name">
            {{ item.type_money }}折
          </span>
          <span v-else class="name">
            满{{ item.type_condition }}减{{ parseInt(item.type_money) }}
          </span>
          <span class="del" @click="couponDelete(index)">
            删除
          </span>
        </li>
      </ul>
    </div>

    <Coupon
      :alert-coupon="alertCoupon"
      @close="alertCoupon = false"
      @couponChange="couponChange"
    />
  </div>
</template>

<script>
import { styleUrls } from "../../data";
export default {
  components: {
    Coupon: () => import("./toolCom/Coupon")
  },
  props: {
    dataJson: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      styleUrls,
      alertCoupon: false
    };
  },
  methods: {
    alertTag() {
      this.$emit("alertTag", true, this.dataJson.stylesType, 15);
    },
    dragstartListSort(index, e) {
      this.$emit("dragstartListSort", index, e);
    },
    dropListSort(index, e, attr) {
      this.$emit("dropListSort", index, e, attr);
    },
    dragoverListSort() {},
    couponChange(e) {
      if (e) {
        this.dataJson.coupon = [...this.dataJson.coupon, ...e];
        this.dataJson.coupon = this.dataJson.coupon.map(ele => {
          ele = JSON.stringify(ele);
          return ele;
        });
        this.dataJson.coupon = Array.from(new Set(this.dataJson.coupon));
        this.dataJson.coupon = this.dataJson.coupon.map(ele => {
          ele = JSON.parse(ele);
          return ele;
        });
      }
    },
    couponDelete(index) {
      this.dataJson.coupon.splice(index, 1);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/decorate.scss";
</style>
